<template >
    <div class="bigconn" >
        <!-- 头部 -->
        <div class="favorites-head">
            <van-nav-bar title="卡券" left-text="" left-arrow @click-left="onClickLeft"
                />
        </div>
            
        <van-tabs v-model:active="activeName" background="#eae9e5" line-color='#000' title-active-color="#c1ab96">
            <van-checkbox-group v-model="checked">
                <div class="favorites-goods">
                    <van-tab title="优惠卷" name="a">
                                <div class="coupon" >
                                    <div class="coupon-true" >
                                       <span class="coupon-true-dot" ></span> 可使用
                                    </div> 
                                    <div class="coupon-can-use" >
                                        <div class="coupon-can-use-con" >
                                            <div class="coupon-can-use-text" >
                                                OMINI.BASS官方旗舰店
                                            </div>
                                            <p class="coupon-can-use-date" >
                                                有效期：2019.07.01 - 2019-07.31
                                            </p>
                                        </div>
                                        <div class="coupon-can-use-icon" >

                                        </div>
                                     
                                        
                                    <div>

                                  </div>
            
                                   
            
                                    </div> 
                                </div>
                                <div class="coupon" >
                                    <div class="coupon-true" >
                                       <span class="coupon-true-dot" ></span> 已失效
                                    </div> 
                                    <div class="coupon-can-use" >
                                        <div class="coupon-can-use-con" >
                                            <div class="coupon-can-use-text" >
                                                OMINI.BASS官方旗舰店
                                            </div>
                                            <p class="coupon-can-use-date" >
                                                有效期：2019.07.01 - 2019-07.31
                                            </p>
                                        </div>
                                        <div class="coupon-can-use-icon" >

                                        </div>
                                     
                                        
                                    <div>

                                  </div>
            
                                   
            
                                    </div> 
                                </div>
                   
                    </van-tab>
                    <van-tab  title="会员卡" name="b">
                        <div  class="coupon-box" v-for="(item,index) in ClubCard" :key="index" >
                            <div  @click="details(index)" class="coupon-ClubCard" :style="{'position': 'absolute','top':index*20+'vw','background':item.ys}" >
                                <div class="coupon-ClubCard-introduce" >
                                    <div class="coupon-ClubCard-introduce-img">
                                        <img src="https://fc1tn.baidu.com/it/u=3948226289,290804785&fm=202&mola=new&crop=v1" alt="">
                                        <div class="coupon-ClubCard-introduce-text" >OMINI.BASS</div><div class="coupon-ClubCard-introduce-text-xia" >官方旗舰店</div>

                                    </div>
                                </div>
                                <div class="coupon-ClubCard-text" >
                                    <p>{{item.kk}}</p>
                                    <p>VIP CARD</p>
                                </div>
                            </div>
                       
                        </div>
                      
                    </van-tab>         
                </div>
            </van-checkbox-group>

        </van-tabs>
        <van-overlay :show="show"  @click="show = !show " >
            <div   class="wrapper">
                <div class="coupon-show" >
                <div  class="coupon-ClubCard-show" :style="{'background':ClubCardDetails.ys}"  >
                    <div class="coupon-ClubCard-introduce" >
                        <div class="coupon-ClubCard-introduce-img">
                            <img src="https://fc1tn.baidu.com/it/u=3948226289,290804785&fm=202&mola=new&crop=v1" alt="">
                            <div class="coupon-ClubCard-introduce-text" >OMINI.BASS</div><div class="coupon-ClubCard-introduce-text-xia" >官方旗舰店</div>
                            <button class="coupon-ClubCard-introduce-button" @click="go"  >进店</button>
                        </div>
                    </div>
                    <div class="coupon-ClubCard-text" >
                        <p>{{ClubCardDetails.kk}}</p>
                        <p>VIP CARD</p>
                    </div>
                </div>
            </div>
            </div>
          </van-overlay>

    </div>

</template>
<script setup lang="ts" >
import { onMounted, reactive, ref } from 'vue'
import {getClubCard} from '@/api/my1'
const onClickLeft = () => history.back();
const onClickRight = () => {
    if(DutDelete.value=="删除"){
        DutDelete.value="编辑"
        ShowDelete.value=false

    }else{
        DutDelete.value="删除"
        ShowDelete.value=true

    }
}
let ClubCard=ref([])
onMounted(function(){
    getClubCard()
    .then(res=>{
        ClubCard.value=res.data.data
        console.log(ClubCard);

        
    })
})

let DutDelete=ref("编辑")
let ShowDelete=ref(false)
let show =ref(false)
const activeName = ref('a');
const active = ref(0);
const checked = ref([]);
let go=function(){
    console.log(111);
    
}
//会员卡详情
let ClubCardDetails=reactive({
    id
: 
1,
kk
: 
"金卡会员",
name
: 
"OMINI.BASS官方旗舰店",
vap
: 
"VIP CARD",
ys
: 
"#8e7e6f",
})

let details=function(index){
    Object.assign(ClubCardDetails,ClubCard.value[index])
    show.value=!show.value
    
    console.log(ClubCardDetails);
    
}
</script>
<style>
.favorites-head {
    width: 100%;
    background: #eae9e5;
    height: 10vw;
    position: fixed;
    top: 0;
    z-index: 10;

}
 .bigconn .van-tabs__wrap{
    width: 100%;
    height: 10vw;
    top: 10vw;
    position: fixed !important ;
    z-index: 10;
}
 .bigconn .van-nav-bar__title {
    font-weight: 800 !important;
}

 .bigconn .van-nav-bar__content {
    background: #eae9e5 !important;
    border: 0;
}

 .bigconn .van-icon {
    color: #c5a28f !important;
}

 .bigconn .van-nav-bar__text {
    color: #333333 !important;
    font-size: 1vw !important;
}

.favorites-goods {
    padding: 4vw;
    margin-top: 20vw;

}

 .bigconn .van-card {
    border-radius: 2vw;
    border: 1px solid #dedede;
    box-shadow:0 0 2vw .5vw #aaa;
    background: #fff;
    flex: 1;
    margin-left: 2vw;
}

.coupon{
    margin-bottom: 5vw  ;
}
.coupon-true{
    font-weight: 600;
    font-size: 4vw;
    margin-bottom: 2vw;
    color:#333333;
    
}


.coupon-true-dot{
    display: inline-block;
    width: 3vw;
    height: 3vw;
    margin-right: 2vw;
    border-radius: 50%;
    background: #c1ab96;
}
.coupon-can-use{
    width: 100%;
    height: 30vw;
    border: 1px solid #999;
    box-shadow:.5vw 1vw 2vw .8vw rgb(236, 230, 230);
    margin-top: 2vw;
    display: flex;
}
.coupon-can-use-con{
    flex: 7;
}
.coupon-can-use-icon{
    flex: 3;
}
.coupon-can-use-text{
    font-weight: 600;
    font-size: 4vw;
    box-sizing: border-box;
    padding: 5vw 0 5vw 7vw;
}
.coupon-can-use-date{
    box-sizing: border-box;
    padding: 3vw 0 5vw 7vw;
    color:#999999;
    font-size: 3vw;
}    
.coupon-ClubCard{
    width: 100%;
    height: 50vw;
    border-radius:5vw ;
    background: #c5a28f;
    box-shadow:0vw 0vw 1.2vw .1vw #cacaca;
}
.coupon-ClubCard-show{
    width: 100%;
    height: 50vw;
    border-radius:5vw ;
}
.coupon-ClubCard-introduce{
    width: 100%;
    height: 18vw;
}

.coupon-ClubCard-introduce-img{
    display: flex;
}
.coupon-ClubCard-introduce-img img{
   margin-left: 4vw; 
   margin-top: 3vw;
   width: 11.5vw;
   height: 11.5vw;
   border-radius:50% ;
   box-shadow:0vw 1vw 1.2vw .1vw #a28f7d;
}
.coupon-ClubCard-introduce-text{
    margin-left: 3vw;
    line-height: 18vw;
    font-size: 5vw;
    color: #fff;
    font-weight: 600;
}
.coupon-ClubCard-introduce-text-xia{
    line-height: 20vw;
    color: #fff;
    font-size: 4vw;
    font-weight: 600;
}
.coupon-ClubCard-introduce-button{
  height: 5vw;
  border-radius:8vw ;
  padding: 0 3.2vw ;
  font-size: 1vw;
  margin-left: 3vw;
  color:#c1ab96;
  border: 0;
  margin-top: 6vw;
}
.coupon-box{
    position: relative;
}
.coupon-ClubCard-text{
    margin-top: 3vw;
    color: #fff;
}
.coupon-ClubCard-text p{
    padding: 5vw 0 0 5vw;
}
.coupon-show{
    width: 100%;
    position: fixed;
    padding: 5vw;
    box-sizing: border-box;
    margin-top: 60vw;
  
}
</style>